<!--
 $ @Author: liujiajun 45444154+wo1261931780@users.noreply.github.com
 $ @Date: 2022-07-24 14:50:34
 $ @LastEditors: liujiajun 45444154+wo1261931780@users.noreply.github.com
 $ @LastEditTime: 2022-07-24 14:50:57
 $ @FilePath: \vue-demo\src\main\webapp\bbb018.html
 $ @Description: 1111
 $ @
 $ @Copyright (c) 2022 by liujiajun 45444154+wo1261931780@users.noreply.github.com, All Rights Reserved.
 -->
<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "UTF-8"/>
	<meta content = "IE=edge" http-equiv = "X-UA-Compatible"/>
	<meta content = "width=device-width, initial-scale=1.0" name = "viewport"/>
	<title>Document</title>
</head>
<body>
<div id = "demoApp">
	<label for = "account">我是双向绑定</label
	><input id = "account" v-model = "account"/>
	{{account}}
	<!--{{两个大括号包裹的内容，称为插值表达式}}-->
	<br/>
	<!-- <a href="http://"></a> -->
	<!-- <a v-bind:href="url">点击</a> -->
	<!-- 上面相当于把href作为一个变量 -->
	<!-- 变量的对应值就是下面返回体中的url -->
	<label>我是网址的双向绑定:</label>
	<input v-model = "url"/>
	<!-- 这里可以直接绑定返回值中的任意变量 -->
	<!-- 我绑定url，那么就是返回了url -->
	<a :href = "url">点击</a>
	<!-- 这样简化来写也是可以的 -->
</div>

<script src = "js/vue.js"></script>
<script>
	new Vue({
		el: "#demoApp",
		// 这里要加个井号
		data() {
			// 上面实际上是使用了一个function类型的表达式
			// 完整写法应该是：data:function(){}
			return {
				account: "",
				url: "http://www.baidu.com",
			};
		},
	});
</script>
</body>
</html>
